<template>
  <view class="cu-modal bottom-modal " :class="value ? 'show' : ''" @tap="hideModalSku" catchtouchmove="touchMove">
    <view class="cu-dialog dialo-sku bg-white " :class="value ? 'animation-slide-bottom' : ''" @tap.stop>
      <view class="cu-card article no-card" style="height: 30%">
        <view class="cu-item">
          <view class="content">
            <image :src="customImg ? customImg : goodsSpu.picUrls[0] || '/static/public/img/no_pic.png'" mode="widthFix"
              class="row-img margin-top-xs">
            </image>
            <view class="desc">
              <view class="margin-top-xl text-bold text-black text-lg">{{ goodsSpu.name }}</view>
              <view v-if="isPoint" class="text-bold text-red text-lg">{{ goodsSpu.points }}积分</view>
              <view v-else class="text-price margin-top-xl text-bold text-red text-lg">{{ goodsSpu.dsPrice }}</view>
              <view class="text-gray text-sm">{{stockTxt}}{{ goodsSpu.stockNum ? goodsSpu.stockNum : 0 }}件</view>
              <view>
              </view>
            </view>
          </view>
        </view>
        <view class="text-xl close-icon">
          <text class="cuIcon-close" @tap="hideModalSku"></text>
        </view>
      </view>
      <scroll-view scroll-y scroll-with-animation style="height:60%">
        <view class="cu-bar bg-white solid-top">
          <view class="action">
            <text class="text-black">数量</text>
          </view>
          <base-stepper customClass="margin-right" :stNum="cartNum" :min="1"
            :max="goodsSpu.stockNum ? goodsSpu.stockNum : 0" @numChange="numChange"></base-stepper>
        </view>
      </scroll-view>
      <view class="cu-bar bg-white tabbar border shop foot" v-if="addBtn">
        <view class="btn-group">
          <button class="cu-btn round shadow-blur lg bg-red" :disabled="disabled" style="width: 46%" @tap="toDo" :data-type="1">加入购物车</button>
          <button class="cu-btn round shadow-blur lg" :class="'bg-' + theme.themeColor" :disabled="disabled" style="width: 46%" @tap="toDo" :data-type="2">立即购买</button>
        </view>
      </view>
      <view class="cu-bar bg-white tabbar border shop foot" v-else>
        <view class="btn-group">
          <button class="cu-btn round shadow-blur lg" :class="'bg-' + theme.themeColor" :disabled="disabled" style="width: 90%" @tap="toDo" :data-type="2">确认</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
const app = getApp();
import baseStepper from "components/oc-stepper/index";
export default {
  data() {
    return {
      CustomBar: this.CustomBar,
      theme: app.globalData.theme, //全局颜色变量
      cartNum: 1,
    };
  },
  watch: {
    value() {
      this.cartNum = 1
    }
  },
  components: {
    baseStepper
  },
  props: {
    value: Boolean,
    isPoint: Boolean,
    addBtn: {
      type: Boolean,
      default: true
    },
    stockTxt:{
      type: String,
      default: '库存'
    },
    customImg:{
      type: String,
      default: ''
    },
    goodsSpu: {
      type: Object,
      default: () => { }
    },
  },
  computed: {
    disabled() {
      return this.cartNum > this.goodsSpu.stockNum || !this.goodsSpu.stockNum || this.cartNum == '0'
    }
  },
  methods: {
    hideModalSku() {
      if(this.disabled) return
      this.$emit('input', false);
    },
    numChange(val) {
      this.cartNum = val
      // this.$emit('numChange', val);
    },
    //提交
    toDo(e) {
      if(this.disabled) return
      let type = e.currentTarget.dataset.type;
      this.$emit('confirm', this.cartNum, type);
    }
  }
};
</script>
<style>
.m-sku-bn {
  width: 45%
}

.row-img {
  width: 240upx !important;
  height: 240upx !important;
  border-radius: 10upx
}

.dialo-sku {
  height: 80%;
}

.cu-modal {
  text-align: unset;
  z-index: 2220;
}

.close-icon {
  position: absolute;
  right: 20upx;
  top: 20upx;
}
</style>
